<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" class="detail-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="计划编号：">
                        {{ form.shipPlanNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：" prop="shipName">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：" prop="voyage">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划类型：" prop="planType">
                        {{ form.planType | _filterShipPlanType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态：" prop="planStatus">
                        {{ form.planStatus | _filterTallyPlanStatus }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="创建时间：">
                        {{ form.createDateTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成日期：">
                        {{ form.taskTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航日期：">
                        {{ form.feeCloseTime }}
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="封航人：">
                        {{ form.closeUser }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="space-between" class="mt-10">
            <el-col :span="4">
                <el-button @click="handleExport">导出</el-button>
            </el-col>
            <el-col :span="20" style="display: flex;justify-content: space-between">
                <title-point color="#30C8CA">
                    <div slot="content">
                        总箱量 :
                        <span style="font-size: 16px">{{ list.length }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        20尺 :
                        <span style="font-size: 16px;margin-right: 10px">{{ twoSize }}</span>
                        40尺 :
                        <span style="font-size: 16px">{{ fourSize }}</span></div>
                </title-point>
                <title-point color="#50B155">
                    <div slot="content">
                        中转 :
                        <span style="font-size: 16px;margin-right: 10px">{{ change }}</span>
                        非中转 :
                        <span style="font-size: 16px">{{ noChange }}</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        外贸 :
                        <span style="font-size: 16px;margin-right: 10px">{{ inNum }} </span>
                        内贸 :
                        <span style="font-size: 16px">{{ outNum }} </span>
                    </div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        厂装 :
                        <span style="font-size: 16px;margin-right: 10px">{{ cang }} </span>
                        港装 :
                        <span style="font-size: 16px">{{ gang }} </span>
                    </div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" align="center" label="序号" width="55"></el-table-column>
            <el-table-column prop="isTally" label="理箱状态"  min-width="120">
                <template slot-scope="scope">
                    {{scope.row.isTally == '0' ? '未理箱':'已理箱'}}
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="100"></el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="140"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="140"></el-table-column>
            <el-table-column prop="change" label="中转"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.change | _filterIsChange }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="80"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="80"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="80"></el-table-column>
            <el-table-column prop="containerWeight" label="箱货重"  min-width="100"></el-table-column>
            <el-table-column prop="cargoType" label="货类"  min-width="80"></el-table-column>
            <el-table-column prop="containerOwnerName" label="箱主"  min-width="110"></el-table-column>
            <el-table-column prop="loadPort" label="装货港"  min-width="100"></el-table-column>
            <el-table-column prop="unloadPort" label="卸货港"  min-width="100"></el-table-column>
            <el-table-column prop="unloadArea" label="卸区"  min-width="100"></el-table-column>
            <el-table-column prop="tallyRemark" label="备注"  min-width="100"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {
        getShipPlanId,
        getShipPlanIdList,
        editShipPlan,
        getShipPlanList,
        deleteShipPlanList,
        shipPlanTradeType,
        shipPlanTransfer,
        shipPlanShipAgent,
        shipPlanInport,
        webDetail
    } from "@/api/shipPlan/shipPlan";
    import titlePoint from '../common/title-point'

    export default {
        name: "卸船计划详情",
        components: { titlePoint },
        data() {
            return {
                form: {},
                id: '',
                created: true,
                list: [],
                totalNum: 0,
                twoSize: 0,
                fourSize: 0,
                change: 0,
                noChange: 0,
                inNum: 0,
                outNum: 0,
                cang: 0,
                gang: 0,
                created:true
            }
        },
        mounted() {
            this.id = sessionStorage.getItem('unloadDetail') || false
            if(this.created){
                this.loadData()
            }
        },
        activated() {
            if(!this.created){
                this.loadData()
            }
        },
        methods: {
            loadData() {
                if (this.id) {
                    getShipPlanId(this.id).then(res => {
                        this.form = res.data
                        webDetail(this.id, {}).then(response => {
                            this.created = false
                            this.list = response.data.aaData
                            this.totalNum = this.list.length
                            this.twoSize = 0
                            this.fourSize = 0
                            this.change = 0
                            this.noChange = 0
                            this.inNum = 0
                            this.outNum = 0
                            this.cang = 0
                            this.gang = 0
                            this.list.forEach(f => {
                                if (f.containerSize == 20) {
                                    this.twoSize = this.twoSize + 1
                                }
                                if (f.containerSize == 40) {
                                    this.fourSize = this.fourSize + 1
                                }
                                if (f.change === '1') {
                                    this.change = this.change + 1
                                }
                                if (f.change === '0') {
                                    this.noChange = this.noChange + 1
                                }
                                if (f.tradeType === 'I') {
                                    this.inNum = this.inNum + 1
                                }
                                if (f.tradeType === 'O') {
                                    this.outNum = this.outNum + 1
                                }
                                if (f.enchaseWay === 'GZ') {
                                    this.gang = this.gang + 1
                                }
                                if (f.enchaseWay === 'CZ') {
                                    this.cang = this.cang + 1
                                }
                            })
                        })
                        // shipPlanTradeType(this.id, params).then(response => {
                        //     this.tradeType = response.data
                        // })
                        // shipPlanTransfer(this.id, params).then(response => {
                        //     this.transfer = response.data
                        // })
                        // shipPlanShipAgent(this.id, params).then(response => {
                        //     this.shipAgent = response.data
                        // })
                    })
                }
            },
            handleExport() {
                let map = new Map();
                map.set("containerId", "箱号")
                map.set("containerType", "箱型")
                map.set("containerSize", "尺寸")
                map.set("sealNo", "铅封号")
                map.set("ef", "空重")
                map.set("tradeType", "内外贸")
                map.set("enchaseWay", "装箱方式")
                map.set("billNumber", "提单号")
                map.set("shipAgentName", "船代")
                map.set("change", "中转")
                map.set("cargoName", "货名")
                map.set("cargoCount", "件数")
                map.set("cargoWeight", "货重")
                map.set("containerWeight", "箱货重")
                map.set("cargoType", "货类")
                map.set("containerOwnerName", "箱主")
                map.set("loadPort", "装货港")
                map.set("unloadPort", "卸货港")
                map.set("unloadArea", "卸区")
                map.set("tallyRemark", "备注")
                webDetail(this.id).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "ef") {
                                record[key] = ifHeavyType.get(record[key]);
                            }
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "enchaseWay") {
                                record[key] = isChange.get(record[key]);
                            }
                            if (key === "change") {
                                record[key] = enchaseWayType.get(record[key]);
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("卸船计划详情", exportRecords);
                })
            }
        }
    }
</script>

<style scoped>

</style>
